<template>
    <div>
        
        <el-upload
        class="upload-demo"
      :action="resourcesUrl + '/inf-bridge-service/back/storage/file/upload'"
      :headers="{Authorization: token}"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      multiple
      :limit="limit"
      :on-success="handleUploadSuccess"
      :file-list="imageList"
      :before-upload="beforeAvatarUpload">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>


    </div>
</template>
<script>
    export default {
    data () {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        resourcesUrl: ''
      }
    },
    props: {
      value: {
        default:()=>{
            return []
        },
        type: Array 
      },
      sizeVisible: {
        default: false,
        type: Boolean
      },
      limit: {
        default: 10,
        type: Number
      },
    },
    created() {
      
      this.resourcesUrl = process.env.VUE_APP_BASE_API
      this.token = localStorage.getItem('token')
    },
    computed: {
      imageList () {
        let res = []
        if (this.value.length) {
          this.value.map(item=>{
            res.push({name:item.fileName,url:item.fileUrl})
          })
        }
        // this.$emit('input', { pics: this.value})
        return res
      }
    },
    methods: {
      // 图片上传
      handleUploadSuccess (response, file, fileList) {
          if(response.code==0){
            let arr = [...this.value, response.data];
            this.$emit("input", arr);
          }
      },
      // 限制图片上传大小
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < this.limit
        if (!isLt2M) {
          this.$message.error('上传附件大小不能超过 '+this.limit+'MB!')
          return isLt2M
        }
        
        return isLt2M
      },
      handleRemove (file, fileList) {
        // console.log(": " + JSON.stringify(file));
        let index =this.value.findIndex(item=> item.fileUrl==file.url);
         this.$emit('delteImage',index)
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      }
    }
  }
</script>
<style lang="scss" scoped>

</style>